import React, { Component } from 'react'
import axios from "axios"
import PersonShow from './PersonShow';

export default class TableShowContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            members: [],
            clickColumnID: 0,
            clickCrossID: 0
        }

        axios.get('/static/members.json').then(res => {
            let members = [];

            members = res.data;

            this.setState({
                members
            })
        })
    }

    componentWillUpdate() {
        if (this.props.clickCrossID === this.state.clickCrossID && this.props.clickColumnID === this.state.clickColumnID) {
            return;
        }

        axios.get('/static/members.json').then(res => {
            let members = [];

            if (this.props.clickColumnID === 0 && this.props.clickCrossID === 0) {
                members = res.data;
            } else if (this.props.clickColumnID === 0) {
                res.data.map((item, index) => {
                    if (item.typeID === this.props.clickCrossID) {
                        members.push(item)
                    }
                    return index;
                });
            } else if (this.props.clickCrossID === 0) {
                res.data.map((item, index) => {
                    if (item.yearID === this.props.clickColumnID) {
                        members.push(item)
                    }
                    return index;
                });
            } else {
                res.data.map((item, index) => {
                    if (item.typeID === this.props.clickCrossID && item.yearID === this.props.clickColumnID) {
                        members.push(item)
                    }
                    return index;
                });
            }

            this.setState({
                members,
                clickCrossID: this.props.clickCrossID,
                clickColumnID: this.props.clickColumnID
            })

            this.props.handleCancelLoading(); // 将loading置为false
        })
    }

    render() {

        let membersData = <div style={{
            color: '#bbb',
            fontSize: 30,
            textAlign: 'center',
            lineHeight: '550px',
            width: '100%',
            height: '100%'
        }}>
            嘤嘤嘤，这一年度没有该方向的同学
        </div>

        if (this.state.members.length !== 0) {
            membersData = [];
            this.state.members.map((item, index) => {
                membersData.push(<PersonShow key={index} item={item} />)
                return index;
            })
        }

        return (
            <div style={{
                width: 1050,
                height: 550,
                backgroundColor: '#fff',
                display: 'flex',
                flexWrap: 'wrap'
            }}>
                {membersData}
            </div>
        )
    }
}
